<template>
	<view>
		<view class="head" @click="onSwitch">
			<text :id="1" :class="{'active': id==1}">可使用</text>
			<text :id="2" :class="{'active': id==2}">已过期(已使用)</text>
		</view>
		<view class="card_content" v-if="cardList.length!=0">
			<view class="card" v-for="(item,index) in cardList" :key="index">
				<image src="../../static/ci_card.jpg" mode="aspectFit"></image>
				<view class="right" @click="navTo(item.TotalId)">
					<text class="title">{{item.FName}}</text>
					<text>消费商品: {{item.FName}}  {{item.FTime}}次卡</text>
					<text>使用期限: {{item.FCardTypeDesc}}</text>
					<view class="card_number">
						<text>次数:{{item.FTime}}/{{item.LiveTime}}</text>
						<!-- <button>使用</button> -->
					</view>
				</view>
			</view>
		</view>
		<view class="card_content" v-else>
			暂无次卡
		</view>
	</view>
</template>

<script>
	import {mapMutations} from 'vuex';
	export default {
		data() {
			return {
				id: 1,
				cardList: [],
				arr1: [],
				arr2: [],
			};
		},
		onLoad() {
			this.init();
		},
		methods:{
			...mapMutations(['onCoupon','onCard']),
			init(){
				this.arr1 = [];
				this.arr2 = [];
				this.$util.util('membershop/MemberTimeList','','POST').then(res=>{
					console.log(res);
					let number = 0;
					res.forEach((item)=>{
						if(item.StatusDesc=='已过期'){
							this.arr2.push(item);
						}else{
							this.arr1.push(item);
							number += item.LiveTime;;
						}
					})
					this.cardList = this.arr1;
					this.onCard(number);
				}).catch(error=>console.log(error))
			},
			onSwitch(e){
				console.log(e);
				this.id = e.target.id;
				this.cardList = [];
				if(this.id==1){
					this.cardList = this.arr1;
				}else{
					this.cardList = this.arr2;
				}
			},
			navTo(id){
				uni.navigateTo({
					url: `/pages/coupon/details?type=1&id=${id}`
				})
			},
		}
	}
</script>

<style lang="scss">
	page{
		background: #f8f8f8;
	}
	
	.head{
		width: 100%;
		height: 88upx;
		line-height: 88upx;
		background-color: #fff;
		display: flex;
		flex-wrap: nowrap;
		justify-content: space-around;
		align-items: center;
		position: fixed;
		top: 0upx;
		z-index: 100;
		box-shadow: 0upx 12upx 12upx rgba(21,51,77,0.05);
	}
	.active {
	    border-bottom: 4rpx solid #F4CAA6;
	}
	.card_content{
		padding-top: 80upx;
		margin: 40upx 20upx;
		.card{
			width: 100%;
			height: 220upx;
			margin-bottom: 20upx;
			background-color: #fff;
			border-radius: 8upx;
			box-shadow: 0px 6px 12px rgba(32,32,32,0.05);
			image{
				width: 220upx;
				height: 220upx;
				float: left;
				margin-right: 20upx;
				// border-right: 2upx solid #000;
			}
			.right{
				width: 470upx;
				float: left;
				.title{
					width: 100%;
					line-height: 42upx;
					font-size: 32upx;
					font-weight: bold;
					color: #000;
					margin: 10upx 0;
				}
				text{
					width: 100%;
					line-height: 32upx;
					font-size: 24upx;
					color: #A2A2A2;
					display: inline-block;
				}
				.card_number{
					width: 100%;
					height: 60upx;
					text{
						font-size: 28upx;
						color: #4CD964;
						line-height: 60upx;
						float: left;
						width: auto;
					}
					button{
						padding: 0;
						margin: 0;
						width: 130upx;
						height: 60upx;
						color: #fff;
						background-color: #4CD964;
						float: right;
						line-height: 60upx;
					}
				}
			}
		}
	}
</style>
